<template>

  <div class="password-box">
    <div class="recompose-box">
      <el-form
        label-width="100px"
        class="demo-company"
      >
        <el-form-item class="short" label="当前登录密码：" prop="userPassword">
          <el-input v-model="userPassword" placeholder="请先验证当前登录密码" type="password" />
          <i class="iconfont icon-password icon" />
          <i class="iconfont icon-close-eyes eyes" />
          <div class="box">
            <div v-show="state" class="error-msg">{{ presentPass }}</div>
          </div>
        </el-form-item>
      </el-form>
      <button class="btn" :disabled="disable" @click="next">下一步</button>
    </div>
  </div>
</template>

<script>
import { checkPassword } from '@/api/personal-center'
export default {
  data() {
    return {
      disable: false,
      userPassword: '',
      active: 0,
      presentPass: '',
      state: false
    }
  },
  methods: {
    next() {
      this.$emit('next')
      if (!this.userPassword) {
        this.presentPass = '请先验证密码'
        this.state = true
        return
      }
      this.disable = true
      checkPassword(this.userPassword).then(res => {
        this.disable = false
        if (res.data) {
          this.$emit('setUUID', res.message)
          this.$emit('next')
        } else {
          this.presentPass = '密码验证失败,请重新验证'
          this.state = true
        }
      }).catch(() => {
        this.disable = false
      })
    }
  }
}
</script>

<style lang='scss' scoped >
.password-box{
  width: 100%;
  height: 100%;
  background: #F5F5F5;
  .pass-title{
    height: 67px;
    color: #3D3D3D;
    padding-left:30px;
    line-height: 67px;
    font-size: 16px;
    font-weight: bold;
    background: #ffffff;
    margin-bottom: 20px;
  }
  .recompose-box{
    height: 564px;
    background: #ffffff;
    padding: 23px 0 0 122px;
    .demo-company{
        margin-top: 46px;
        .short{
            position: relative;
            .icon{
                position: absolute;
                left: 36px;
                font-size: 22px;
            }
            .eyes{
                position: absolute;
                right: 290px;
                font-size: 22px;
                color: #C7C7CC;
            }
        }
        .box{
          height: 20px;
          line-height: 20px;
          .error-msg{
            text-align: left;
            padding-left: 14px;
            color: #f56c6c;
          }
        }
    }
    .btn{
      margin: 10px 0 0 115px;
      width: 110px;
      height: 37px;
      background: #FF3B30;
      color: #ffffff;
      line-height: 37px;
      text-align: center;
      cursor: pointer;
      border-radius: 3px;
    }
  }
  /deep/ .recompose-box {
    .el-input{
      width: 400px;
      height: 42px;
    }
    .el-form-item__label{
        width: 112px !important;
    }
  }
  /deep/ .short{
      .el-input__inner{
          text-indent: 46px;
      }
  }
}
</style>
